<template>
	<page-wraper>
		<view>
			<wd-search hide-cancel @search="load" />

			<view style="margin-top: 15px;">
				<wd-status-tip image="search" tip="当前搜索无结果" v-if="list.length == 0" />

				<wd-card :title="`${item.name} ${item.phone_number}`" v-for="(item, index) in list" :key="index">
					<template v-if="item.country_code === 'CN'">
						{{ item.state_code }} {{ item.city }} {{ item.address1 }} {{ item.address2 }}
					</template>
					<template v-else>
						{{ item.address1 }}

						<div v-if="item.address2">
							{{ item.address2 }}
						</div>

						<div>
							{{ item.city }}, {{ item.state_code }}, {{ item.postal_code }} ({{ item.country_code }})
						</div>
					</template>
					<template #footer>
						<view>
							<wd-button size="small" type="error" custom-style="margin-right: 8px"
								@click="() => _delete(item.id)">删除</wd-button>
							<wd-button size="small" plain @click="() => edit(item)">修改</wd-button>
						</view>
					</template>
				</wd-card>
			</view>
		</view>

		<wd-loadmore :state="state" @reload="load" />
		
		<wd-tabbar fixed bordered safeAreaInsetBottom placeholder>
			<wd-button icon="add" block @click="add">添加地址</wd-button>
		</wd-tabbar>
	</page-wraper>
</template>
<script lang="ts" setup>
	import { ref, onUnmounted } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'

	const state = ref<any>('loading')
	const list = ref<any>([]);
	const pageIndex = ref(1);
	const pageSize = 20;

	function load({ value }) {
		state.value = 'loading';

		uni.$http.get(`user/address_book/list?page=${pageIndex.value}&limit=${pageSize}&sort=created&keywords=${value}`).then(res => {
			if (pageIndex.value == 1) {
				list.value = res.data.data || [];
			} else {
				list.value = list.value.concat(res.data.data || []);
			}

			if (list.value.length != pageSize) {
				state.value = 'finished';
			}
		})
	}

	function add() {
		uni.setStorageSync('params', {});

		uni.navigateTo({
			url: '/pages/address_book/Edit'
		});
	}

	function edit(row : any) {
		uni.setStorageSync('params', row);

		uni.navigateTo({
			url: '/pages/address_book/Edit'
		});
	}

	function _delete(id : number) {
		uni.showModal({
			title: '提示',
			content: '确定要删除吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$http.post(`user/address_book/delete`, { ids: [id] }).then(() => {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						load({ value: '' });
					});
				}
			}
		});
	}

	onLoad(() => {
		load({ value: '' });
	});

	onReachBottom(() => {
		pageIndex.value += 1;

		load({ value: '' });
	})

	uni.$on('refreshAddressBook', () => {
		pageIndex.value = 1;

		load({ value: '' });
	});

	onUnmounted(() => {
		uni.$off('refreshAddressBook');
	});
</script>
<style lang="scss" scoped>
	.wot-theme-dark {
		.title-tip {
			color: rgba(232, 230, 227, 0.8);
		}

		.custom-main {
			color: $-dark-color;
		}

		.custom-sub {
			color: $-dark-color-gray;
		}
	}

	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}

	.custom-main {
		color: rgba(0, 0, 0, 0.85);
		font-size: 16px;
	}

	.custom-sub {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
</style>